/**
 * 创建动画函数
 * @param {number} scrollStart - 滚动开始位置
 * @param {number} scrollEnd - 滚动结束位置
 * @param {number} startValue - 初始值
 * @param {number} endValue - 结束值
 * @returns {function} - 动画函数
 */
function createAnimation(scrollStart, scrollEnd, startValue, endValue) {
    return function (x) {
        if (x < scrollStart) {
            return startValue
        }
        if (x > scrollEnd) {
            return endValue
        }
        const progress = (x - scrollStart) / (scrollEnd - scrollStart)
        return startValue + progress * (endValue - startValue)
    }
}

const animationMap = new Map();
const items = document.querySelectorAll('.list-item')
const playGround = document.querySelector('.playground')
const list = document.querySelector('.list')

function getDomAnimation(scrollStart, scrollEnd, dom) {
    const opacityAnimation = createAnimation()
    const opacity = function (x) { }
    const transform = function (x) { }
    return {
        opacity,
        transform
    }
}

// 设置（更新）动画映射
function updateMap() {
    for (const item of items) {
        animationMap.set(item, getDomAnimation(scrollStart, scrollEnd, item))
    }
}

// 将map结构中的动画应用到元素上
function updateStyles() {
    const scrollY = window.scrollY
    // 遍历animationMap中的dom和animations
    for (const [dom, animations] of animationMap) {
        // 遍历animations中的属性
        for (const prop in animations) {
            // 获取属性值
            const value = animations[prop](scrollY)
            // 设置元素样式
            dom.style[prop] = value
        }
    }
}

updateStyles()
window.addEventListener('scroll', updateStyles)